<script setup>
import {ref,reactive,computed, onMounted} from 'vue'
//import {useMembersStore} from '@/store/members'
//import { useMemberCardStore } from '@/store/memberCard'
import {useMemberCardRelationStore} from '@/store/memberCardRelation'
import {useCourseStore} from '@/store/course'
import {useReservationRecordStore} from '@/store/reservationRecord'
import {useClassRecordStore} from '@/store/classRecord'
import {useConsumptionRecordStore} from '@/store/consumptionRecord'
import {useOperationRecordStore} from '@/store/operationRecord'
import { storeToRefs } from 'pinia'
import {ElMessage, ElMessageBox} from 'element-plus'
import * as xlsx from 'xlsx'
import CustomTable from '@/components/CustomTable.vue'
import memberApi from '@/api/member.js'
import memberCardApi from '@/api/memberCard.js'

//const membersStore = useMembersStore()
//const {members} = storeToRefs(membersStore)
//const memberCardStore = useMemberCardStore()
//const {memberCards} = storeToRefs(memberCardStore)
const memberCardRelationStore = useMemberCardRelationStore()
const courseStore = useCourseStore()
const {courses} = storeToRefs(courseStore)
const reservationRecordStore = useReservationRecordStore()
const classRecordStore = useClassRecordStore()
const consumptionRecordStore = useConsumptionRecordStore()
const operationRecordStore = useOperationRecordStore()

const curView = ref("member");

const members = ref([])

//#region 添加会员
const addMemberForm = reactive({
    memberName: "",
    phoneNum: "",
    gender: "男",
    birthDate: "",
    remark: "",
})

const bindForm = reactive({
    memberId: null,
    memberCardId: null,
    rechargeTimes: 0,
    validityPeriod: 0,
    receivedAmount: 0,
    paymentMethod: '',
    remark: ''
})

const addMember = async () =>{
    //membersStore.addMember(addMemberForm);
    const temp = await memberApi.addMember(addMemberForm)
    const res = await memberApi.getMembers()
    members.value = res.data.data
    addMemberForm.memberName = "";
    addMemberForm.phoneNum = "";
    addMemberForm.gender = "男";
    addMemberForm.birthDate = "";
    addMemberForm.remark = "";
    curView.value = "member";
    return temp.data.data
}

const addMemberAndBindCard = async () =>{
    const member = await addMember()
    bindForm.memberId = member.id;
    memberCardRelationStore.addMemberCardRelation(bindForm)
    bindForm.memberCardId = null
    bindForm.memberCardId = null
    bindForm.rechargeTimes = 0
    bindForm.validityPeriod = 0
    bindForm.receivedAmount = 0
    bindForm.paymentMethod = ''
    bindForm.remark = ''
}
//#endregion

//#region 编辑会员
const editMemberDialogVisible = ref(false);

const editMemberForm = reactive({
    id: "",
    memberName: "",
    phoneNum: "",
    gender: "",
    birthDate: "",
    remark: "",
})

const showEditMemberDialog = async (id) => {
    //const temp = members.value.find(item => item.id === id);
    const res = await memberApi.getMemberById(id)
    const temp = res.data.data
    editMemberForm.id = id;
    editMemberForm.memberName = temp.memberName;
    editMemberForm.phoneNum = temp.phoneNum;
    editMemberForm.gender = temp.gender;
    editMemberForm.birthDate = temp.birthDate;
    editMemberForm.remark = temp.remark;
    editMemberDialogVisible.value = true;
}

const editMember = async () =>{
    //membersStore.editMember(editMemberForm);
    await memberApi.editMember(editMemberForm)
    const res = await memberApi.getMembers()
    members.value = res.data.data
    editMemberDialogVisible.value = false;
}
//#endregion

//#region 查看会员详情
let detailMember = {}
let detailMemberCards = []
let reservationRecords = []
let consumptionRecords = []
let classRecords = []

const showDetail = async (id) =>{
    //detailMember = members.value.find(item => item.id === id)
    let res = await memberApi.getMemberById(id)
    detailMember = res.data.data
    detailMemberCards = memberCardRelationStore.getMemberCardsByMemberId(id)
    reservationRecords = reservationRecordStore.getReservationRecordsByMemberId(id)
    classRecords = classRecordStore.getClassRecordsByMemberId(id)
    consumptionRecords = consumptionRecordStore.getConsumptionRecordsByMemberId(id)
    curView.value = "show-detail"
}

const changeCardStatus = (memberId, memberCardId, isAvaliable) => {
    memberCardRelationStore.setAvailable(memberId, memberCardId, isAvaliable)
}
//#endregion

//#region 充值
const rechargeDialogVisible = ref(false);
let rechargeMemberId = 0;
let rechargeMemberCardId = 0;

const rechargeForm = reactive({
    rechargeTimes: 0,
    prolongDays: 0,
    receivedAmount: 0,
    paymentMethod: '',
    remark: ''
})

const showRechargeDialog = (id, cardId) => {
    rechargeDialogVisible.value = true;
    rechargeMemberId = id;
    rechargeMemberCardId = cardId;
}

const recharge = () =>{
    memberCardRelationStore.recharge(rechargeMemberId, rechargeMemberCardId, rechargeForm)
    rechargeDialogVisible.value = false;
}
//#endregion

//#region 扣费
const consumeDialogVisible = ref(false);
let consumeMemberId = 0;
let consumeMemberCardId = 0;

const consumeForm = reactive({
    courseId: null,
    consumeTimes: 0,
    consumeAmount: 0,
    remark: ''
})

const showConsumeDialog = (id, cardId) => {
    consumeDialogVisible.value = true;
    consumeMemberId = id;
    consumeMemberCardId = cardId;
}

const consume = () =>{
    memberCardRelationStore.consume(consumeMemberId, consumeMemberCardId, consumeForm)
    consumptionRecords = consumptionRecordStore.getConsumptionRecordsByMemberId(consumeMemberId)
    consumeDialogVisible.value = false;
}
//#endregion

//#region 操作记录
const operationRecordDialogVisible = ref(false);
let operationRecordMemberId = 0;
let operationRecordMemberCardId = 0;
let operationRecords = []

const showOperationRecordDialog = (id, cardId) => {
    operationRecordDialogVisible.value = true;
    operationRecordMemberId = id;
    operationRecordMemberCardId = cardId;
    operationRecords = operationRecordStore.getOperationRecords(id, cardId)
}
//#endregion

//#region 注销会员
const showCancelMemberMessage = (id) =>{
    ElMessageBox.confirm('确认注销此会员信息吗? 注销后将无法恢复，请谨慎操作！', '注销确认', {
        confirmButtonText: '注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async action => {
            if (action === 'confirm') {
                await cancelMember(id);
                ElMessageBox.alert('会员信息已注销', {
                    type: 'success'
                });
            }
        }
    })
}

const cancelMember = async (id) =>{
    //membersStore.deleteMember(cancelMemberId);
    await memberApi.deleteMember(id)
    const res = await memberApi.getMembers()
    members.value = res.data.data
}
//#endregion

//#region 批量导入
const importMembers = (file) =>{
    let reader = new FileReader();
    reader.readAsBinaryString(file.file);
    reader.onload = async (e) => {
        let data = e.target.result;
        let workbook = xlsx.read(data, {type: 'binary'});
        let sheetName = workbook.SheetNames[0];
        let sheet = workbook.Sheets[sheetName];
        let rows = xlsx.utils.sheet_to_json(sheet, {raw: true});
        for (let i = 0; i < rows.length; i++) {
            let row = rows[i];
            let birthdate = new Date((row['出生日期'] - 25569) * 86400000)
            let member = {
                memberName: row['会员姓名'],
                phoneNum: row['手机号'],
                gender: row['性别'],
                birthDate: getFormattedDate(birthdate),
                remark: row['备注'],
            }
            //membersStore.addMember(member);
            await memberApi.addMember(member)
            const res = await memberApi.getMembers()
            members.value = res.data.data
        }
        ElMessage.success("批量导入成功");
    }
}

const importBind = (file) =>{
    let reader = new FileReader();
    reader.readAsBinaryString(file.file);
    reader.onload = async (e) => {
        let data = e.target.result;
        let workbook = xlsx.read(data, {type: 'binary'});
        let sheetName = workbook.SheetNames[0];
        let sheet = workbook.Sheets[sheetName];
        let rows = xlsx.utils.sheet_to_json(sheet, {raw: true});
        for (let i = 0; i < rows.length; i++) {
            let row = rows[i];
            let res1 = await memberApi.getMemberByName(row['会员姓名'])
            let res2 = await memberCardApi.getMemberCardByName(row['会员卡名'])
            let bind = {
                memberId: res1.data.data.id,
                memberCardId: res2.data.data.id,
                rechargeTimes: row['充值次数'],
                validityPeriod: row['有效期'],
                receivedAmount: row['实收金额'],
                paymentMethod: row['支付方式'],
                remark: row['备注'],
            }
            memberCardRelationStore.addMemberCardRelation(bind)
        }
        ElMessage.success("批量绑定成功");
    }
}

const getFormattedDate = (date) => {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    }
//#endregion

// 必填信息
const rules = {
    memberName: [{ required: true, message: '此字段为必填', trigger: 'blur' }],
    phoneNum: [{ required: true, message: '此字段为必填', trigger: 'blur' }],
    memberCardId: [{ required: true, message: '此字段为必填', trigger: 'blur' }],
}

//#region 列信息
const memberColumnData = [
    { prop: "memberName", label: "会员姓名",},
    { prop: "phoneNum", label: "手机号",},
    { prop: "gender", label: "性别",},
    { prop: "memberCards", label: "会员卡",},
    { prop: "enterDate", label: "入会日期",},
    { prop: "remark", label: "备注",}
]

const reservationRecordColumnData = [
    { prop:"courseName" ,label:"课程", sortable:true},
    { prop:"reservationTime" ,label:"预约时间", sortable:true, width:"200px"},
    { prop:"memberCardName" ,label:"会员卡", sortable:true},
    { prop:"peopleCount" ,label:"预约人数", sortable:true},
    { prop:"consumeTimes" ,label:"使用次数", sortable:true},
    { prop:"operationTime" ,label:"操作时间", sortable:true, width:"200px"},
    { prop:"operator" ,label:"操作人", sortable:true},
    { prop:"remark" ,label:"预约备注", sortable:true},
    { prop:"type" ,label:"预约类型" }
]

const classRecordColumnData = [
    { prop:"courseName", label:"课程", sortable:true},
    { prop:"classTime", label:"上课时间", sortable:true, width:"200px"},
    { prop:"teacherName", label:"授课老师", sortable:true},
    { prop:"memberCardName", label:"会员卡", sortable:true},
    { prop:"peopleCount", label:"上课人数", sortable:true},
    { prop:"consumeTimes" ,label:"使用次数", sortable:true},
    { prop:"teacherAssessment", label:"老师评价", sortable:true},
    { prop:"confirmStatus", label:"确认状态", sortable:true},
]

const consumptionRecordColumnData = [
    { prop:"memberCardName", label:"会员卡", sortable:true},
    { prop:"operationTime", label:"操作时间", sortable:true, width:"200px"},
    { prop:"consumeTimes", label:"消费次数", sortable:true},
    { prop:"remainingTimes", label:"剩下次数", sortable:true},
    { prop:"consumeAmount", label:"消费金额", sortable:true},
    { prop:"operationType", label:"操作类型", sortable:true},
    { prop:"operator", label:"操作人", sortable:true},
    { prop:"remark", label:"备注", sortable:true},
]

const operationRecordColumnData = [
    {prop:"operationTime", label:"操作时间", sortable:true, width:"200px"},
    {prop:"operationType", label:"操作类型", sortable:true},
    {prop:"changeTimes", label:"次数变化", sortable:true},
    {prop:"changeMoney", label:"金额变化", sortable:true},
    {prop:"operator", label:"操作人", sortable:true},
    {prop:"remark", label:"备注", sortable:true},
    {prop:"status", label:"状态"},

]
//#endregion

onMounted(async ()=>{
    let res = await memberApi.getMembers()
    members.value = res.data.data
    members.value.birthDate = formatDate(members.value.birthDate)
    members.value.enterDate = formatDate(members.value.enterDate)
})

formatDate = (date) => {
    return date.split("T")[0]
}
</script>

<template>
    <!-- 会员页面 -->
    <div class="member" v-if="curView === 'member'">
        <div class="handle-box">
            <el-button color="#0eb394" @click="curView = 'add-member'">添加会员</el-button>
            <el-button type="info" @click="curView = 'batch-import'">批量导入会员</el-button>
            <el-button type="info" @click="curView = 'batch-bind-card'">批量绑卡</el-button>
        </div>
        <el-divider style="margin-top: 15px; margin-bottom: 15px;"></el-divider>
        <custom-table
            :tableData="members"
            :columnData="memberColumnData">
            <el-table-column label="操作" width="280">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="showEditMemberDialog(scope.row.id)">编辑<el-icon><Edit/></el-icon></el-button>
                    <el-button type="success" size="small" @click="showDetail(scope.row.id)">详情<el-icon><View/></el-icon></el-button>
                    <el-button type="danger" size="small" @click="showCancelMemberMessage(scope.row.id)">注销会员<el-icon><Close/></el-icon></el-button>
                </template>
            </el-table-column>
        </custom-table>
    </div>

    <!-- 添加会员页面 -->
    <div class="add-member" v-else-if="curView === 'add-member'">
        <div class="header">
            <el-steps style="max-width: 600px" active="0" finish-status="success" align-center>
                <el-step title="会员信息" />
                <el-step title="绑定会员卡" />
                <el-step title="完成" />
            </el-steps>
        </div>
        <el-divider/>
        <el-form :model="addMemberForm" label-position="right" label-width="100px" style="margin-left: 50px" :rules="rules">
            <el-form-item label="会员姓名" prop="memberName">
                <el-input v-model="addMemberForm.memberName" placeholder="会员姓名" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNum">
                <el-input v-model="addMemberForm.phoneNum" placeholder="手机号" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="addMemberForm.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthDate">
                <el-date-picker v-model="addMemberForm.birthDate" value-format="YYYY-MM-DD" placeholder="yyyy-mm-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="addMemberForm.remark" placeholder="会员备注信息" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="curView = 'add-member-bind-card'">保存，为该会员绑定会员卡</el-button>
                <el-button @click="addMember">保存会员信息，暂不绑定会员卡</el-button>
                <el-button @click="curView = 'member'">取消</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 添加会员的绑卡页面 -->
    <div class="add-member-bind-card" v-else-if="curView === 'add-member-bind-card'">
        <div class="header">
            <el-steps style="max-width: 600px" active="1" finish-status="success" align-center>
                <el-step title="会员信息" />
                <el-step title="绑定会员卡" />
                <el-step title="完成" />
            </el-steps>
        </div>
        <el-divider/>
        <el-form :model="form" style="margin-left: 30px" label-position="right" label-width="100px" :rules="rules">
            <el-form-item label="选择会员卡" prop="memberCardId">
                <el-select v-model="bindForm.memberCardId" placeholder="请选择绑定的会员卡" style="width: 600px">
                    <el-option v-for="item in memberCards" :key="item.id" :label="item.memberCardName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-divider/>
            <el-form-item label="充值次数" prop="rechargeTimes">
                <el-input-number v-model="bindForm.rechargeTimes"></el-input-number>
            </el-form-item>
            <el-form-item label="有效期" prop="validityPeriod">
                <el-input-number v-model="bindForm.validityPeriod"></el-input-number>
            </el-form-item>
            <el-form-item label="已收金额" prop="receivedAmount">
                <el-input-number v-model="bindForm.receivedAmount"></el-input-number>
            </el-form-item>
            <el-form-item label="选择支付方式" prop="paymentMethod" style="width: 600px">
                <el-select v-model="bindForm.paymentMethod" placeholder="请选择支付方式">
                    <el-option value="现金"></el-option>
                    <el-option value="支付宝"></el-option>
                    <el-option value="微信"></el-option>
                    <el-option value="银行卡"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="bindForm.remark" style="width: 600px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addMemberAndBindCard">确认</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 批量导入会员页面 -->
    <div class="batch-import" v-else-if="curView === 'batch-import'">
        <h2>会员批量导入</h2>
        <el-divider/>
        <div class="upload">
            <el-upload
                :http-request="importMembers"
                :limit="1"
                :multiple="false"
                accept=".xlsx"
                drag="true"
            >
                <el-button type="primary" size="large">上传模板</el-button>
                <div style="margin-top: 15px;">点击上传模板文件或将文件拖拽至此区域上传</div>
            </el-upload>
        </div>
        <div class="explanation" style="text-align:left">
            <b>说明</b>
            <ol style="padding-left: 20px; margin-top: 5px;">
                <li>点击下载<a download="会员导入模板.xlsx" href="/public/download/会员导入模板.xlsx">会员导入模板</a></li>
                <li>请按照模板中的格式上传</li>
                <li>若导入表中有手机号在当前系统中已存在，则会跳过(不会覆盖原来的信息)</li>
                <li>如果怕误操作,请联系客服人员帮您,当然是免费的哟~</li>
            </ol>
        </div>
        <el-button  @click="curView = 'member'">返回</el-button>
    </div>

    <!-- 批量绑卡页面 -->
    <div class="batch-bind-card" v-else-if="curView === 'batch-bind-card'">
        <h2>会员卡批量绑定</h2>
        <el-divider/>
        <div class="upload">
            <el-upload
                :http-request="importBind"
                :limit="1"
                :multiple="false"
                accept=".xlsx"
                drag="true"
            >
                <el-button type="primary" size="large">上传模板</el-button>
                <div style="margin-top: 15px;">点击上传模板文件或将文件拖拽至此区域上传</div>
            </el-upload>
        </div>
        <div class="explanation" style="text-align:left">
            <b>说明</b>
            <ol style="padding-left: 20px; margin-top: 5px;">
                <li>点击下载<a download="会员卡绑定模板.xlsx" href="/public/download/会员卡绑定模板.xlsx">会员卡绑定模板</a></li>
                <li>请按照模板中的格式上传</li>
                <li>如果怕误操作,请联系客服人员帮您,当然是免费的哟~</li>
            </ol>
        </div>
        <el-button  @click="curView = 'member'">返回</el-button>
    </div>

    <!-- 查看会员详情页面 -->
    <div class="show-detail" v-else-if="curView === 'show-detail'">
        <div style="display:flex;">
            <div style="align-self:center">
                <el-avatar :size="140"/>
            </div>
            <div style="margin-left: 20px; width: 600px">
                <h2>{{detailMember.memberName}}</h2>
                <p>性别：{{detailMember.gender}}</p>
                <p>手机号：{{detailMember.phoneNum}}</p>
                <p>出生日期：{{detailMember.birthDate}}</p>
                <p>备注：{{detailMember.remark}}</p>
            </div>
            <div style="width: 100px"> 
                <el-button type="primary" @click="showEditMemberDialog(detailMember.id)">编辑信息</el-button>
                <el-button type="info" @click="curView = 'member'" style="margin-top: 10px;">返回</el-button>
            </div>
        </div>
        <el-divider/>
        <div>
            <el-tabs type="border-card">
                <el-tab-pane label="会员卡信息">
                    <el-table :data="detailMemberCards" style="width: 100%;" stripe border>
                        <el-table-column prop="memberCardName" label="会员卡" sortable/>
                        <el-table-column prop="type" label="卡类型" sortable/>
                        <el-table-column prop="availableTimes" label="可用次数" sortable/>
                        <el-table-column prop="expirationDate" label="到期时间" sortable/>
                        <el-table-column prop="isAvailable" label="状态">
                            <template #default="scope">
                                {{scope.row.isAvailable ? '激活' : '未激活'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="停用/激活">
                            <template #default="scope">
                                <el-switch v-model="scope.row.isAvailable" @change="changeCardStatus(detailMember.id, scope.row.memberCardId, scope.row.isAvailable)" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="280">
                            <template #default="scope">
                                <el-button type="success" size="small" :disabled="!scope.row.isAvailable" @click="showRechargeDialog(detailMember.id, scope.row.memberCardId)">充值</el-button>
                                <el-button type="primary" size="small" :disabled="!scope.row.isAvailable" @click="showConsumeDialog(detailMember.id, scope.row.memberCardId)">扣费</el-button>
                                <el-button type="danger" size="small" @click="showOperationRecordDialog(detailMember.id, scope.row.memberCardId)">操作记录</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="预约记录">
                    <custom-table
                        :tableData="reservationRecords"
                        :columnData="reservationRecordColumnData">
                    </custom-table>
                </el-tab-pane>
                <el-tab-pane label="上课记录">
                    <custom-table
                        :tableData="classRecords"
                        :columnData="classRecordColumnData">
                    </custom-table>
                </el-tab-pane>
                <el-tab-pane label="消费记录">
                    <custom-table
                        :tableData="consumptionRecords"
                        :columnData="consumptionRecordColumnData">
                    </custom-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <!-- 编辑会员弹窗 -->
    <el-dialog title="编辑会员" v-model="editMemberDialogVisible">
        <el-form :model="editMemberForm" label-position="right" label-width="100px" style="margin-left: 50px">
            <el-form-item label="会员姓名">
                <el-input v-model="editMemberForm.memberName" placeholder="会员姓名" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="editMemberForm.phoneNum" placeholder="手机号" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="editMemberForm.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-date-picker v-model="editMemberForm.birthDate" value-format="YYYY-MM-DD" placeholder="yyyy-mm-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="editMemberForm.remark" placeholder="会员备注信息" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editMember">保存</el-button>
                <el-button @click="editMemberDialogVisible = false">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 充值弹窗 -->
    <el-dialog title="充值" v-model="rechargeDialogVisible">
        <el-form :model="rechargeForm" label-position="right" label-width="100px" style="margin-left: 50px">
            <el-form-item label="充值次数">
                <el-input-number v-model="rechargeForm.rechargeTimes"></el-input-number>
            </el-form-item>
            <el-form-item label="延长有效期">
                <el-input-number v-model="rechargeForm.prolongDays"></el-input-number>
            </el-form-item>
            <el-form-item label="实收金额">
                <el-input-number v-model="rechargeForm.receivedAmount"></el-input-number>
            </el-form-item>
            <el-form-item label="支付方式">
                <el-select v-model="rechargeForm.paymentMethod" placeholder="请选择支付方式" style="width: 500px;">
                    <el-option value="现金"></el-option>
                    <el-option value="支付宝"></el-option>
                    <el-option value="微信"></el-option>
                    <el-option value="银行卡"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="rechargeForm.remark" placeholder="备注支付信息" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="rechargeDialogVisible = false">关闭</el-button>
                <el-button type="success" @click="recharge">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 扣费弹窗 -->
    <el-dialog title="扣费" v-model="consumeDialogVisible">
        <el-form :model="consumeForm" label-position="right" label-width="100px" style="margin-left: 50px">
            <el-form-item label="课程">
                <el-select v-model="consumeForm.courseId" placeholder="请选择课程" style="width: 500px;">
                    <el-option v-for="course in courses" :key="course.id" :label="course.courseName" :value="course.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="扣除次数">
                <el-input-number v-model="consumeForm.consumeTimes"></el-input-number>
            </el-form-item>
            <el-form-item label="消费金额">
                <el-input-number v-model="consumeForm.consumeAmount"></el-input-number>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="consumeForm.remark" placeholder="备注支付信息" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="consumeDialogVisible = false">关闭</el-button>
                <el-button type="success" @click="consume">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 操作记录弹窗 -->
    <el-dialog title="操作记录" v-model="operationRecordDialogVisible" style="width:1200px">
        <custom-table
            :tableData="operationRecords"
            :columnData="operationRecordColumnData">
        </custom-table>
    </el-dialog>
</template>

<style scoped>
/* .header{
    width: 100%;
    height: 80px;
    line-height: 50px;
    text-align: center;
} */

ol li{
    line-height:30px;
}
</style>
